<template>
  <div class="relative w-full min-h-screen overflow-hidden">
    <!-- 背景层 - 使用绝对定位，z-index: 0 -->
    <canvas ref="particlesCanvas" class="particles-background"></canvas>

    <div class="home-container relative z-10">
      <!-- 导航栏 -->

      <div class="nav-brand flex justify-center items-center w-full py-6">
        <LineShadowText
          class="brand-text text-4xl font-extrabold bg-gradient-to-r from-pink-500 via-purple-500 to-yellow-400 bg-clip-text text-transparent text-center drop-shadow-lg"
        >
          Qiniu AI 角色对话
        </LineShadowText>
      </div>

      <!-- 标题 -->
      <div style="padding: 16px; overflow: visible">
        <!-- 确保不隐藏溢出内容 -->
        <ProjectTitle text="一次对话，让你身临其境" />
      </div>

      <!-- 统计信息 -->
      <div class="stats-section">
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon">👥</div>
            <div class="stat-info">
              <div class="stat-value">{{ filteredRoles.length }}</div>
              <div class="stat-label">可用角色</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">💬</div>
            <div class="stat-info">
              <div class="stat-value">1,248</div>
              <div class="stat-label">今日对话</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">⭐</div>
            <div class="stat-info">
              <div class="stat-value">3</div>
              <div class="stat-label">新增角色</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">🕒</div>
            <div class="stat-info">
              <div class="stat-value">12.4k</div>
              <div class="stat-label">总对话数</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容 -->
      <main class="content">
        <div class="content-header">
          <h2 class="title">选择你的AI角色</h2>
          <div class="view-controls">
            <button
              :class="['view-btn', { active: viewMode === 'grid' }]"
              @click="viewMode = 'grid'"
            >
              <span class="btn-icon">⏹️</span>
              网格
            </button>
            <button
              :class="['view-btn', { active: viewMode === 'list' }]"
              @click="viewMode = 'list'"
            >
              <span class="btn-icon">📋</span>
              列表
            </button>
          </div>
        </div>

        <!-- 角色网格/列表 -->
        <div :class="['roles-container', viewMode]">
          <div
            v-for="role in filteredRoles"
            :key="role.id"
            :class="['role-card', viewMode]"
            @click="showRoleDetail(role)"
          >
            <!-- 网格视图保持不变 -->
            <div v-if="viewMode === 'grid'" class="card-image">
              <img :src="role.avatar" :alt="role.name" class="role-avatar" />
              <div class="image-overlay">
                <h3 class="role-name">{{ role.name }}</h3>
                <p class="role-category">{{ role.category }}</p>
              </div>
              <button
                class="favorite-btn"
                :class="{ favorited: role.favorited }"
                @click.stop="toggleFavorite(role.id, $event)"
              >
                {{ role.favorited ? '★' : '☆' }}
              </button>
            </div>

            <!-- 列表视图 - 重新设计 -->
            <div v-else class="list-view-card">
              <div class="list-avatar-container">
                <img :src="role.avatar" :alt="role.name" class="list-avatar" />
                <div class="online-status" :class="{ online: 1 > 0.5 }"></div>
              </div>

              <div class="list-content">
                <div class="list-header">
                  <div class="list-title-section">
                    <h3 class="list-name">{{ role.name }}</h3>
                    <span class="list-category">{{ role.category || '通用助手' }}</span>
                  </div>
                  <button
                    class="list-favorite-btn"
                    :class="{ favorited: role.favorited }"
                    @click.stop="toggleFavorite(role.id, $event)"
                  >
                    {{ role.favorited ? '❤️' : '🤍' }}
                  </button>
                </div>

                <p class="list-description">
                  {{ role.description || '专业的AI助手，随时为您服务' }}
                </p>

                <div class="list-stats">
                  <div class="stat-item">
                    <span class="stat-icon">💬</span>
                    <span class="stat-value">{{ role.conversationCount || 0 }}</span>
                    <span class="stat-label">对话</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-icon">⭐</span>
                    <span class="stat-value">{{ role.rating || 4.8 }}</span>
                    <span class="stat-label">评分</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-icon">🕒</span>
                    <span class="stat-value">{{ Math.floor(Math.random() * 24) }}</span>
                    <span class="stat-label">小时前</span>
                  </div>
                </div>

                <div class="list-tags">
                  <span v-for="tag in role.tags || []" :key="tag" class="tag">
                    {{ tag }}
                  </span>
                  <span v-if="!role.tags || role.tags.length === 0" class="no-tags">
                    暂无标签
                  </span>
                </div>
              </div>

              <div class="list-actions">
                <button class="quick-chat-btn" @click.stop="goToChat(role.id)">
                  <span class="btn-icon">💬</span>
                  聊天
                </button>
                <button class="quick-voice-btn" @click.stop="goToVoiceChat(role)">
                  <span class="btn-icon">🎤</span>
                  语音
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <!-- <div v-if="filteredRoles.length === 0" class="empty-state">
          <div class="empty-icon">🤖</div>
          <h3>未找到匹配的角色</h3>
          <p>尝试调整搜索条件或创建新角色</p>
          <button class="create-role-btn" @click="showCreateRole = true">创建新角色</button>
        </div> -->
      </main>

      <!-- 创建角色模态框 -->
      <div v-if="showCreateRole" class="modal-overlay" @click="showCreateRole = false">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>创建新角色</h3>
            <button class="close-btn" @click="showCreateRole = false">×</button>
          </div>
          <div class="modal-body">
            <p>创建角色功能开发中...</p>
            <button class="confirm-btn" @click="showCreateRole = false">确定</button>
          </div>
        </div>
      </div>

      <!-- 角色详情模态框 -->
      <!-- 角色详情模态框 -->
      <div v-if="selectedRole" class="role-detail-modal" @click="closeRoleDetail">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ selectedRole.name }} - 详细信息</h3>
            <button class="close-btn" @click="closeRoleDetail">×</button>
          </div>
          <div class="modal-body">
            <div class="detail-content">
              <!-- 修改1：调整角色图片宽度为160px -->
              <img :src="selectedRole.avatar" :alt="selectedRole.name" class="detail-avatar" />
              <div class="detail-info">
                <!-- <h4>角色描述</h4> -->
                <p>{{ selectedRole.category }}</p>
                <p>{{ selectedRole.description }}</p>
                <div class="detail-stats">
                  <div class="stat-item">
                    <span class="stat-label">对话次数</span>
                    <span class="stat-value">{{ selectedRole.conversationCount || 0 }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">评分</span>
                    <span class="stat-value">{{ selectedRole.rating || 4.8 }}</span>
                  </div>
                  <!-- <div class="stat-item">
                    <span class="stat-label">分类</span>
                    <span class="stat-value">{{ selectedRole.category || '通用助手' }}</span>
                  </div> -->
                </div>
                <div class="detail-tags">
                  <h4>标签</h4>
                  <div class="tags-container">
                    <span v-for="tag in selectedRole.tags || []" :key="tag" class="tag">
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="modal-actions">
              <div class="action-buttons">
                <button class="text-chat-btn" @click="goToChat(selectedRole.id)">
                  <span class="btn-icon">💬</span>
                  文字聊天
                </button>
                <button class="voice-chat-btn" @click="goToVoiceChat(selectedRole)">
                  <span class="btn-icon">🎤</span>
                  语音聊天
                </button>
              </div>
              <button class="close-modal-btn" @click="closeRoleDetail">关闭</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部信息 -->
      <footer class="app-footer">
        <div class="footer-content">
          <p>© 2025 AI角色深度体验平台 · 已服务 10,000+ 用户 · 在线助手: {{ onlineCount }}</p>
          <div class="footer-links">
            <a href="#" class="footer-link">帮助中心</a>
            <a href="#" class="footer-link">用户协议</a>
            <a href="#" class="footer-link">联系我们</a>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoleStore } from '@/stores/role'
import { useRouter } from 'vue-router'
import LineShadowText from '../components/LineShadowText.vue'
import ProjectTitle from '../components/ProjectTitle.vue'

const roleStore = useRoleStore()
const router = useRouter()
interface Role {
  id: string
  name: string
  avatar: string
  description?: string
  favorited?: boolean
  category?: string
  conversationCount?: number
  rating?: string
  tags?: string[]
  lastActive?: number
}

// ... existing code ...
const selectedRole = ref<Role | null>(null)
const searchQuery = ref('')
const activeFilter = ref('all')
const viewMode = ref<'grid' | 'list'>('grid')
const showCreateRole = ref(false)
const onlineCount = ref(156)

// 粒子效果相关
const particlesCanvas = ref<HTMLCanvasElement | null>(null)
let animationFrameId: number
let particles: Particle[] = []

class Particle {
  x: number
  y: number
  size: number
  speedX: number
  speedY: number
  color: string
  opacity: number
  life: number
  maxLife: number

  constructor(width: number, height: number) {
    this.x = Math.random() * width
    this.y = Math.random() * height
    this.size = Math.random() * 2 + 0.5
    this.speedX = Math.random() * 0.5 - 0.25
    this.speedY = Math.random() * 0.5 - 0.25
    this.color = `rgba(${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 200 + 55)}, `
    this.opacity = Math.random() * 0.6 + 0.2
    this.life = Math.random() * 100
    this.maxLife = 100
  }

  update(width: number, height: number) {
    this.x += this.speedX
    this.y += this.speedY

    // 边界检查
    if (this.x < 0 || this.x > width) this.speedX *= -1
    if (this.y < 0 || this.y > height) this.speedY *= -1

    // 生命周期
    this.life -= 0.1
    if (this.life <= 0) {
      this.life = this.maxLife
      this.x = Math.random() * width
      this.y = Math.random() * height
    }
  }

  draw(ctx: CanvasRenderingContext2D) {
    const currentOpacity = this.opacity * (this.life / this.maxLife)
    ctx.fillStyle = this.color + currentOpacity + ')'
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fill()
  }
}

const initParticles = () => {
  if (!particlesCanvas.value) return

  const canvas = particlesCanvas.value
  const ctx = canvas.getContext('2d')
  if (!ctx) return

  // 设置canvas尺寸
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)

  // 创建500个粒子
  particles = []
  for (let i = 0; i < 800; i++) {
    particles.push(new Particle(canvas.width, canvas.height))
  }

  // 动画循环
  const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 更新并绘制每个粒子
    particles.forEach((particle) => {
      particle.update(canvas.width, canvas.height)
      particle.draw(ctx)
    })

    // 绘制粒子间的连线
    ctx.strokeStyle = 'rgba(150, 120, 255, 0.1)'
    ctx.lineWidth = 0.7

    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x
        const dy = particles[i].y - particles[j].y
        const distance = Math.sqrt(dx * dx + dy * dy)

        if (distance < 100) {
          ctx.beginPath()
          ctx.moveTo(particles[i].x, particles[i].y)
          ctx.lineTo(particles[j].x, particles[j].y)
          ctx.stroke()
        }
      }
    }

    animationFrameId = requestAnimationFrame(animate)
  }

  animate()

  // 清理函数
  return () => {
    window.removeEventListener('resize', resizeCanvas)
    cancelAnimationFrame(animationFrameId)
  }
}

// 模拟增强的角色数据
const enhancedRoles = computed(() => {
  return roleStore.roles.map((role) => ({
    ...role,
    favorited: Math.random() > 0.7,
    conversationCount: Math.floor(Math.random() * 1000),
    rating: (4 + Math.random() * 1).toFixed(1),
    // tags: ['智能', '友好', '专业'].slice(0, Math.floor(Math.random() * 3) + 1),
    lastActive: Date.now() - Math.floor(Math.random() * 86400000), // 24小时内
  }))
})

const filteredRoles = computed(() => {
  let roles = enhancedRoles.value

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    roles = roles.filter(
      (role) =>
        role.name.toLowerCase().includes(query) ||
        role.description.toLowerCase().includes(query) ||
        (role.tags && role.tags.some((tag) => tag.toLowerCase().includes(query))),
    )
  }

  // 标签过滤
  switch (activeFilter.value) {
    case 'favorite':
      roles = roles.filter((role) => role.favorited)
      break
    case 'recent':
      roles = roles.sort((a, b) => b.lastActive - a.lastActive)
      break
    case 'popular':
      roles = roles.sort((a, b) => b.conversationCount - a.conversationCount)
      break
  }

  return roles
})

const goToChat = (roleId: string) => {
  router.push(`/chat/${roleId}`)
}
const goToVoiceChat = (role: Role) => {
  router.push({
    path: '/call',
    query: {
      roleId: role.id,
      roleName: role.name,
      roleAvatar: role.avatar,
      roleDescription: role.description,
    },
  })
  closeRoleDetail()
}
const toggleFavorite = (roleId: string, event: Event) => {
  event.stopPropagation()
  const roles = enhancedRoles.value
  const roleIndex = roles.findIndex((role) => role.id === roleId)
  if (roleIndex !== -1) {
    roles[roleIndex].favorited = !roles[roleIndex].favorited
  }
}

const showRoleDetail = (role: Role) => {
  selectedRole.value = role
}

const closeRoleDetail = () => {
  selectedRole.value = null
}

onMounted(() => {
  // 初始化粒子效果
  const cleanupParticles = initParticles()

  // 模拟在线用户数更新
  setInterval(() => {
    onlineCount.value = 150 + Math.floor(Math.random() * 20)
  }, 5000)

  // 组件卸载时清理
  onUnmounted(() => {
    if (cleanupParticles) cleanupParticles()
  })
})
</script>

<style scoped>
/* 列表视图卡片 */
.role-card.list {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  margin-bottom: 16px;
}

.role-card.list:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 优化列表视图的整体布局 */
.list-view-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: -30px;
  min-height: 140px;
}
.list-content {
  flex: 1;
  min-width: 0;
  padding-right: 10px; /* 增加右边距，避免与操作按钮重叠 */
}

/* 修改列表视图下角色头像的位置和样式 */
.list-avatar-container {
  position: relative;
  flex-shrink: 0;
  /* margin-top: 4px; */
  /* margin-bottom: 24px; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-avatar {
  width: 110px;
  height: 160px;
  border-radius: 20px;

  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  background: #f5f5f5;
}

.online-status {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e53e3e;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.online-status.online {
  background: #38a169;
}
.list-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 内容垂直居中 */
  gap: 8px;
}

.list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.list-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2d3748;
  margin: 0;
}

.list-category {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.list-favorite-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin-left: auto;
}

.list-favorite-btn.favorited {
  color: #e53e3e;
}

.list-favorite-btn:hover {
  transform: scale(1.2);
}

.list-description {
  color: #718096;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(247, 250, 252, 0.8);
  padding: 10px 16px;
  border-radius: 12px;
  min-width: 80px;
}
.stat-icon {
  font-size: 1rem;
}

.stat-label {
  font-size: 0.8rem;
  color: #718096;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d3748;
}

.list-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.list-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.quick-chat-btn,
.quick-voice-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 80px;
}

.quick-chat-btn:hover,
.quick-voice-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-1px);
}

.quick-voice-btn {
  background: rgba(56, 161, 105, 0.1);
  color: #38a169;
  border: 1px solid rgba(56, 161, 105, 0.2);
}

.quick-voice-btn:hover {
  background: #38a169;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .list-view-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 16px;
  }

  .list-avatar-container {
    align-self: center;
    margin-top: 0;
    margin-right: 0;
  }

  .list-avatar {
    width: 80px; /* 稍微减小头像尺寸 */
    height: 80px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .list-header {
    flex-direction: column;
    gap: 8px;
  }

  .list-title-section {
    align-items: center;
  }

  .list-category {
    align-self: center;
  }

  .list-stats {
    justify-content: center;
    gap: 20px;
  }

  .list-actions {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .quick-chat-btn,
  .quick-voice-btn {
    flex: 1;
    justify-content: center;
  }

  .detail-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .detail-avatar {
    width: 140px;
    height: 140px;
    margin-bottom: 16px;
  }
}
.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(135deg, #b2e6ca 0%, #b1cfea 100%);
}

.home-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: transparent;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: max-content; /* 确保容器有足够宽度 */
  white-space: nowrap;
}

.logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}

.nav-actions {
  display: flex;
  gap: 10px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: #005ecc;
  transform: translateY(-1px);
}

.btn-icon {
  font-size: 16px;
}

/* 搜索区域 */
.search-section {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
}

.search-box {
  position: relative;
  max-width: 400px;
  margin-bottom: 16px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  border-color: #007aff;
}

.clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #6b7280;
}

.filter-tabs {
  display: flex;
  gap: 8px;
}

.filter-tab {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 16px;
  padding: 6px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-tab.active {
  background: #007aff;
  color: white;
}

.filter-tab:hover:not(.active) {
  background: rgba(0, 0, 0, 0.1);
}

/* 统计信息 */
.stats-section {
  padding: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 2rem;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1d1d1f;
}

.stat-label {
  font-size: 0.9rem;
  color: #6b7280;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 2rem 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.title {
  margin: 0;
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.view-controls {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 4px;
  border-radius: 12px;
}

.view-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  color: white;
}

.view-btn.active {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 角色容器 */
.roles-container {
  display: grid;
  gap: 1.5rem;
  perspective: 1000px; /* 为3D效果添加透视 */
}

.roles-container.grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.roles-container.list {
  grid-template-columns: 1fr;
}

.role-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更平滑的动画 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  aspect-ratio: 3/4; /* 保持卡片比例 */
  transform-style: preserve-3d; /* 启用3D变换 */
  transform: perspective(1000px) rotateY(0deg) translateZ(0); /* 初始状态 */
}

.role-card:hover {
  transform: perspective(1000px) rotateY(10deg) translateY(-4px) translateZ(20px); /* 水平翻转 + 上浮 */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* 图片区域 - 占据整个卡片 */
.card-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.role-card:hover .card-image {
  transform: scale(1.02); /* 图片轻微放大 */
}

.role-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.role-card:hover .role-avatar {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 20px 16px 16px;
  color: white;
  transform: translateZ(20px); /* 给文字添加深度 */
}

.image-overlay .role-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: white;
}

.image-overlay .role-category {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.9;
}

.favorite-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #ccc;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(30px); /* 收藏按钮在最上层 */
}

.favorite-btn.favorited {
  color: #ffd700;
}

.favorite-btn:hover {
  background: white;
  transform: scale(1.1) translateZ(30px);
}

/* 列表视图适配 */
.role-card.list {
  flex-direction: row;
  height: 150px;
  aspect-ratio: auto;
}

.role-card.list .card-image {
  width: 120px;
  height: 100%;
  flex-shrink: 0;
}
.role-card.list:hover .list-avatar {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
/* 列表视图下的翻转效果调整 */
.role-card.list:hover {
  transform: perspective(1000px) rotateY(5deg) translateY(-4px) translateZ(10px);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  margin: 20px 0;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  color: #1d1d1f;
}

.empty-state p {
  margin: 0 0 24px 0;
  color: #6b7280;
}

.create-role-btn {
  background: #007aff;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.create-role-btn:hover {
  background: #005ecc;
  transform: translateY(-1px);
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(212, 219, 222, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  animation: fadeInUp 0.3s ease; /* 入场动画 */
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
}

.modal-body {
  padding: 20px;
  text-align: center;
}

.confirm-btn {
  background: #007aff;
  color: white;
  border: none;
  border-radius: 16px;
  padding: 8px 20px;
  cursor: pointer;
  margin-top: 16px;
}

/* 角色详情模态框 */
.role-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.role-detail-modal .modal-content {
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.role-detail-modal .modal-body {
  text-align: left;
}

.detail-content {
  display: flex;
  align-items: flex-start;
  gap: 16px; /* 图片和文字之间的间距 */
  margin-bottom: 16px;
}
.detail-avatar {
  width: 160px;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  flex-shrink: 0;
  background: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 3px solid rgba(255, 255, 255, 0.8);
}
.detail-info {
  flex: 1;
}
.detail-info h4 {
  margin: 0 0 8px 0;
  color: #1d1d1f;
}

.detail-info p {
  margin: 0 0 16px 0;
  color: #6b7280;
  line-height: 1.5;
}
.detail-info {
  flex: 1; /* 占满剩余空间 */
}
.detail-stats {
  display: flex;
  gap: 16px; /* 增加间距 */
  margin: 16px 0;
  flex-wrap: wrap; /* 允许换行 */
}

.detail-tags h4 {
  margin-bottom: 8px;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.chat-btn {
  flex: 1;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 16px;
  padding: 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-btn:hover {
  background: #005ecc;
}

.close-modal-btn {
  background: rgba(0, 0, 0, 0.05);
  color: #6b7280;
  border: none;
  border-radius: 16px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.close-modal-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 底部信息 */
.app-footer {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px 20px;
  margin-top: auto;
}
.brand-text {
  font-size: 1.8rem; /* 加大字体 */
  font-weight: 700;
  color: #1d1d1f;
  white-space: nowrap; /* 确保不换行 */
  line-height: 1.2;
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #6b7280;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-link {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #007aff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-bar {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
  }

  .nav-actions {
    width: 100%;
    justify-content: center;
  }

  .content-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .roles-container.grid {
    grid-template-columns: 1fr;
  }

  .role-card.list {
    flex-direction: column;
    height: auto;
  }

  .role-card.list .card-image {
    width: 100%;
    height: 200px;
  }

  .detail-stats {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }

  .footer-content {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* 移动端减少翻转角度 */
  .role-card:hover {
    transform: perspective(1000px) rotateY(5deg) translateY(-4px) translateZ(10px);
  }
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

.text-chat-btn,
.voice-chat-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 16px;
  padding: 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.text-chat-btn {
  background: #007aff;
  color: white;
}

.text-chat-btn:hover {
  background: #005ecc;
  transform: translateY(-1px);
}

.voice-chat-btn {
  background: #34c759;
  color: white;
}

.voice-chat-btn:hover {
  background: #30a14e;
  transform: translateY(-1px);
}

.close-modal-btn {
  background: rgba(0, 0, 0, 0.05);
  color: #6b7280;
  border: none;
  border-radius: 16px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.close-modal-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.btn-icon {
  font-size: 1.2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
  }
}
</style>
